<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titl查询页面e</title>
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="../jquery-validation-1.9.0/jquery.validate.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<style>
    .a {
        border-bottom: 1px solid #D0D3D4;
    }

    #left {
        float: left;
        margin-top: 20px;
        margin-bottom: 5px;
    }

    #right {
        float: right;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .form-group input {
        width: 75%;
        display: inline-block;
    }

    .form-group input {
        margin-bottom: 10px;
    }
</style>
<body>
<div class="container">
    <div class="row a">
        <div id="left">
            <span class="glyphicon glyphicon-user glyphicon-white"></span>
            <c style="font-size: 15px">新增用户</c>
        </div>
        <div id="right">
            <button class="btn">隐藏</button>
            <button class="btn"><a href="newly.html" style="color: white">新增</a></button>
        </div>
    </div>
    <div class="row">
        <div action="" class="form-group" style="margin-top: 20px">
            <div class="col-md-2 col-sm-6 col-xs-12">
                <label for="account" class="control-label">账号:</label>
                <input type="text" id="account" class="form-control">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <label for="pwd" class="control-label">密码:</label>
                <input type="text" id="pwd" class="form-control">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <label for="sex" class="control-label">性别:</label>
                <select name="" id="sex" class="form-control" style="width: 75%;display: inline-block">
                    <option value=" "></option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>

            <div class="col-md-4 col-sm-6 col-xs-12">
                <label for="hobby">爱好:</label>
                <select name="" id="hobby" class="form-control" style="width: 75%;display: inline-block">
                    <option value=" ">--请选择爱好--</option>
                    <option value="1">篮球</option>
                    <option value="2">NBA</option>
                    <option value="3">游戏</option>
                </select>
            </div>

            <div class="col-md-2  col-xs-12">
                <button class="btn btn-primary" id="search1" onclick="query1()">查询</button>
                <button class="btn btn-default" type="reset">重置</button>
            </div>
        </div>
    </div>
    <div style="width: 100%;overflow: auto;margin-top: 10px" class="text-center">
        <div style="min-width: 750px;">
            <table class="table table-bordered table-hover table-striped" id="table">
                <tr>
                    <td>公司</td>
                    <td>部门</td>
                    <td>账号</td>
                    <td>密码</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>爱好</td>
                    <td>学历</td>
                    <td>头像</td>
                </tr>

            </table>
        </div>
    </div>
    <input type="button" value="上一页" onclick="pgUp()">
    <input type="button" value="下一页" onclick="pgDn()">
    <input type="text" value="1" id="page">
</div>
</body>
</html>
<script type="text/javascript">

    $.ajax({
        url: "../json/user.json",
        type: "get",
        data: "",
        dataType: "json",
        success: function (data) {
            var page = 1;
            var pageSize = 2;
            var startIndex = 0;
            var endIndex = pageSize * page - 1;
            var html = '';

            for (var i = startIndex; i <= endIndex; i++) {
                var sex = data[i].sex == 1?"男":"女";
                html += '<tr>\n' +
                    '                    <td>' + data[i].company + '</td>\n' +
                    '                    <td>' + data[i].department + '</td>\n' +
                    '                    <td>' + data[i].account + '</td>\n' +
                    '                    <td>' + data[i].pwd + '</td>\n' +
                    '                    <td>' + data[i].age + '</td>\n' +
                    '                    <td>' + data[i].sex + '</td>\n' +
                    '                    <td>' + data[i].hobby + '</td>\n' +
                    '                    <td>' + data[i].edu + '</td>\n' +
                    '                    <td>' + data[i].head + '</td>\n' +
                    '                </tr>'
            }
            $("#table").append(html)
        },
        error: function () {
            alert("链接失败");
        }
    });

    function pgDn() {
        var page = $("#page").val();
        var pageSize = 2;
        $.ajax({
            url: "../json/user.json",
            type: "get",
            data: "",
            dataType: "json",
            success: function (data) {
                page = parseInt(page) + 1;
                var num = data.length % pageSize == 0 ? data.length / pageSize : data.length / pageSize + 1
                   // console.log(num)
                if(page<=num){
                        $("#table").empty();
                       var startIndex = (page - 1) * pageSize;
                       var endIndex = pageSize * page - 1;
                       if(endIndex >= data.length){
                          endIndex = data.length -1
                       }
                        $("#page").val(page)
                var html = '';
                for (var i = startIndex; i <= endIndex; i++) {
                    var sex = data[i].sex == 1?"男":"女";
                    // var hobby = data
                    html += '<tr>\n' +
                        '                    <td>' + data[i].company + '</td>\n' +
                        '                    <td>' + data[i].department + '</td>\n' +
                        '                    <td>' + data[i].account + '</td>\n' +
                        '                    <td>' + data[i].pwd + '</td>\n' +
                        '                    <td>' + data[i].age + '</td>\n' +
                        '                    <td>' + sex + '</td>\n' +
                        '                    <td>' + data[i].hobby + '</td>\n' +
                        '                    <td>' + data[i].edu + '</td>\n' +
                        '                    <td>' + data[i].head + '</td>\n' +
                        '                </tr>'
                }
                $("#table").append(html)
                }
            },
            error: function () {
                alert("链接失败");
            }
        });
    }

    function pgUp() {
        var page = $("#page").val();
        var pageSize = 2;
        $("#table").empty()
        $.ajax({
            url: "../json/user.json",
            type: "get",
            data: "",
            dataType: "json",
            success: function (data) {
                page = parseInt(page) - 1;
                page = page <= 1 ? 1 : page;
                $("#page").val(page);
                var startIndex = (page - 1) * pageSize;
                var endIndex = pageSize * page - 1;
                var html = '';
                for (var i = startIndex; i <= endIndex; i++) {
                    var sex = data[i].sex == 1?"男":"女";
                    html += '<tr>\n' +
                        '                    <td>' + data[i].company + '</td>\n' +
                        '                    <td>' + data[i].department + '</td>\n' +
                        '                    <td>' + data[i].account + '</td>\n' +
                        '                    <td>' + data[i].pwd + '</td>\n' +
                        '                    <td>' + data[i].age + '</td>\n' +
                        '                    <td>' + data[i].sex + '</td>\n' +
                        '                    <td>' + data[i].hobby + '</td>\n' +
                        '                    <td>' + data[i].edu + '</td>\n' +
                        '                    <td>' + data[i].head + '</td>\n' +
                        '                </tr>'
                }
                $("#table").append(html)
            },
            error: function () {
                alert("链接失败");
            }
        });
    }
</script>